<template>
	<view>
		<block v-if="bg != ''">
			<image class="bg" :src="bg" mode="aspectFill"></image>
		</block>

		<!-- 分享按钮 -->
		<view class="shareBtnsContent">
			<view class="img-box">
				<image :src="(poster != '' ? poster : shareImg)" mode="widthFix" @load="imgLoad"></image>
			</view>

			<view class="pub_list">
				<button class="pub_list_bd button_share" open-type="share">
					<text class="iconfont icon-weixin2"></text>
					<view class="txt">分享给好友</view>
				</button>
				<block v-if="canSave">
					<button v-if="poster != ''" class="pub_list_bd button_share" @tap="savePoster">
						<text class="iconfont icon-pengyouquan"></text>
						<view class="txt">生成海报</view>
					</button>
				</block>
				<block v-else>
					<button v-if="poster != ''" class="pub_list_bd button_share" @opensetting="handleSetting" open-type="openSetting">
						<text class="iconfont icon-pengyouquan"></text>
						<view class="txt">生成海报</view>
					</button>
				</block>
			</view>
		</view>
		<view class="mask_bg"></view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	var _this;
	var app = getApp();
	// 保存图片
	const saveImg = () => {
		wx.showLoading({
			title: '保存中'
		});
		wx.getImageInfo({
			src: _this.poster,
			// 海报路径
			success: res => {
				wx.saveImageToPhotosAlbum({
					filePath: res.path,

					success(res) {
						wx.hideLoading();
						wx.showToast({
							title: '保存成功'
						});
					},

					fail: () => {
						wx.hideLoading();
						wx.showToast({
							title: '保存失败，请重试',
							icon: 'none'
						});
						wx.getSetting({
							success: res => {
								if (res.authSetting['scope.writePhotosAlbum'] == false) {
									_this.canSave = false;
								}
							}
						});
					}
				});
			}
		});
	};

	export default {
		data() {
			return {
				canSave: true,
				// 是否有保存图片的权限
				title: '',
				shareTitle: '',
				shareImg: '',
				sharePath: '',
				poster: '',
				bg: ''
			};
		},

		//  用户点击右上角分享
		onShareAppMessage: function() {
			if (_this.sharePath.indexOf('door_share_id') != -1) {
				_this.sharePath = _this.sharePath.replace('/index/index', '/index/index');
			}
			let pageLink = _this.sharePath
			pageLink = common.addShareParam(pageLink)
			console.log('2222222222', pageLink);
			return {
				title: _this.shareTitle,
				path: pageLink,
				imageUrl: _this.shareImg
			};
		},
		// 生命周期函数--监听页面加载
		onLoad: function(options) {
			_this = this;
			common.setMainColor(_this);
			console.log('分享参数options', options);
			wx.showLoading({
				title: '加载中'
			});

			if (options.poster) {
				_this.poster = decodeURIComponent(options.poster);
			}

			_this.shareTitle = decodeURIComponent(options.shareTitle);
			_this.shareImg = decodeURIComponent(options.shareImg);
			_this.sharePath = decodeURIComponent(options.sharePath);

			if (options.bg) {
				_this.bg = decodeURIComponent(options.bg);
				console.log('_this.bg', _this.bg);
			}

			if (options.title) {
				wx.setNavigationBarTitle({
					title: decodeURIComponent(options.title)
				});
			}
		},
		components: {},
		props: {},
		methods: {
			imgLoad() {
				wx.hideLoading();
			},

			// 生成海报
			savePoster() {
				wx.getSetting({
					success: res => {
						//不存在相册授权
						if (res.authSetting['scope.writePhotosAlbum'] == undefined || res.authSetting['scope.writePhotosAlbum'] ==
							true) {
							saveImg();
						} else if (res.authSetting['scope.writePhotosAlbum'] == false) {
							_this.canSave = false;
						}
					}
				});
			},

			// 打开授权设置
			handleSetting(e) {
				if (e.detail.authSetting['scope.writePhotosAlbum'] == true) {
					saveImg();

					_this.canSave = true;
				}
			},

			// 海报路径
			success: res => {
				wx.saveImageToPhotosAlbum({
					filePath: res.path,

					success(res) {
						wx.hideLoading();
						wx.showToast({
							title: '保存成功'
						});
					},

					fail: () => {
						wx.hideLoading();
						wx.showToast({
							title: '保存失败，请重试',
							icon: 'none'
						});
						wx.getSetting({
							success: res => {
								if (res.authSetting['scope.writePhotosAlbum'] == false) {
									_this.canSave = false;
								}
							}
						});
					}
				});
			},
		}
	};
</script>
<style>
	/* pages/index/share.css */
	page {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.bg {
		width: 100%;
		height: 100%;
	}

	/* 分享按钮 */
	.mask_bg {
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.6;
	}

	.shareBtnsContent {
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.shareBtnsContent .img-box {
		position: relative;
		width: 100%;
		height: calc(100% - 107px);
	}

	.shareBtnsContent .img-box image {
		width: 90%;
		height: 300px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 5px;
	}

	.shareBtnsContent .pub_list {
		padding: 15px 0;
		display: flex;
		justify-content: space-around;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.shareBtnsContent .pub_list .icon-weixin2 {
		color: #00cd0c;
		font-size: 42px;
	}

	.shareBtnsContent .pub_list .icon-pengyouquan {
		color: #00cd0c;
		font-size: 42px;
	}

	.shareBtnsContent .pub_list .txt {
		font-size: 14px;
		color: #333;
	}

	.shareBtnsContent .icon-cha {
		position: absolute;
		right: 5px;
		top: -30px;
		font-size: 24px;
		color: #fff;
	}

	/* 取消button的默认样式 */
	button::after {
		border: none;
	}

	.button_share {
		padding-left: 0;
		padding-right: 0;
		background-color: white;
		line-height: 1.4;
		width: 50%;
	}
</style>
